<template>
  <!--歌单推荐设计-->
  <div class="songSheet">
    <div class="sheet_title">
      歌 单 推 荐
    </div>
    <ul class="sheet_type">
      <li :class="{select:currentIndex===index}" @click="chooseTag(index)" v-for="(tag,index) in recommendTags" :key="index">{{tag.name}}</li>
    </ul>
    <!--歌单推荐轮播-->
    <div class="swiper-container" v-if="ChangeSongList.length" ref="page">
      <!--分页器进行分页-->
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(pages,index) in ChangeSongList" :key="index">
          <div class="swiper-content" v-for="(page,index) in pages" :key="index">
            <div class="swiper-img" @click="toMenuDetail(page.disstid||page.diss_id)">
              <div class="img-cover"></div>
              <img  :src="page.pic?page.pic:page.menu_pic" alt="">
              <div class="icon">
                <span class="iconfont icon-bofang1"></span>
              </div>
            </div>
            <p class="title ellipsis" @click="toMenuDetail(page.disstid||page.diss_id)">{{page.title?page.title:page.diss_name}}</p>
            <p class="count">播放量:{{page.listen_str}}</p>
          </div>
        </div>
      </div>
      <!--分页样式-->
      <div class="swiper-pagination"></div>
      <!--前进后退-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
    import Swiper from 'swiper';
    import 'swiper/css/swiper.min.css';
    import {mapState} from 'vuex'
    import {reqRecommendHot,reqRecommendByTags} from '../../../api/index'
    export default {
      name: "RecommendSongList",
      data(){
        return{
          currentIndex:0,//初始化选中第一个标签
          recommendSongList:[],//推荐歌单
        }
      },
      computed: {
        ...mapState(['menuTags']),
        //推荐的标签
        recommendTags(){
           let chooseItems=[],items;
           let {menuTags} =this;
           chooseItems.push({name:'为你推荐'});
           menuTags=JSON.parse(JSON.stringify(menuTags)); //对象转字符串再转对象
           if(menuTags.tags){//保证在其存在的时候，length有值
             for(let k=0;k<menuTags.tags.length;k++){
                if(menuTags.tags[k].group==='主题'){
                  items=menuTags.tags[k].items;
                  break;
                }
              }
             // console.log(items);
           }
           let count=0;
           if(items){//随机5个推荐标签
             while (count<5){
               var random=Math.floor(Math.random()*17);
               for(var j=0;j<chooseItems.length;j++){
                 if(chooseItems[j].name===items[random].name){
                   break;
                 }
               }
               if(j===chooseItems.length){
                 chooseItems.push(items[random]);
                 count++;
               }
             }
           }
          return chooseItems;
        },
        //将歌单转换为一页显示5条数据
        ChangeSongList(){
            let innerArr=[],outterArr=[];
            for(let i=1;i<=this.recommendSongList.length;i++){
              innerArr.push(this.recommendSongList[i-1]);
              if(i%5===0){
                outterArr.push(innerArr);
                innerArr=[];
              }
            }
            return outterArr;
        }
      },
      methods:{
        chooseTag(index){
          this.currentIndex=index;
        },
        //获取为我推荐歌单
        async getRecommendHot(){
           this.recommendSongList=[];//初始化推荐歌单
           if(this.currentIndex===0){//等于0，则默认为为我推荐歌单,调用该接口
             const response=await reqRecommendHot()
             const result=response.data;
             if(result.message==='ok'){
               for(let i=0;i<10;i++){//只需要取10条数据
                 this.recommendSongList.push(result.data[i]);
               }
             }
             // console.log(this.recommendSongList);
           }else{//否则调用根据标签定义的接口
             this.recommendSongList=[];//初始化推荐歌单
             const id=this.recommendTags[this.currentIndex].id;
             const response=await reqRecommendByTags(id,0,9);
             // console.log(response.data);
             const result=response.data;
             if(result.message==='ok'){
               this.recommendSongList=result.data;
             }
             // console.log(this.recommendSongList);

           }


        },
        toMenuDetail(id){
          this.$router.replace('/menudetail/'+id);
        },
      },
      watch:{
        //通过监听currentIndex的改变，从而决定recommendSongList的值
        currentIndex(value){
            this.getRecommendHot();
        },
        //当数据加载成功以后，再响应滑动事件
        ChangeSongList(value){
          this.$nextTick(()=>{
            new Swiper('.swiper-container', {
              // autoplay:true,
              loop:true,
              speed:2000, // 播放的速度
              // 如果需要分页器，即下面的小圆点
              pagination: {
                el:'.swiper-pagination',
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
              }
            })
          })
        }
      },
      mounted(){
        this.getRecommendHot();//初始状态获得currentIndex=0对应recommendSongList的值
      }

    }
</script>

<style scoped lang="less">
  .songSheet{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
  .songSheet .sheet_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
  .songSheet .sheet_type{margin: 0 auto;width: 1200px}
  .songSheet .sheet_type li{display: inline-block;margin: 35px 25px;}
  .songSheet .sheet_type li.select{color: #31c27c;}
  .songSheet .sheet_type li:hover{cursor: pointer;color: #31c27c;}
  /*实现推荐歌单轮播效果*/
  .swiper-container{
    padding-bottom: 30px;
    .swiper-wrapper{
      .swiper-slide{
        display: inline-block;
        .swiper-content{
          display: inline-block;
          margin-right: 16px;
          font-size: 14px;
          position: relative;
          /*添加阴影蒙版*/
          .img-cover{
            width:100%;
            height:226px;
            position:absolute;
            background-color: rgba(0,0,0,0.3);
            top:0;
            right: 0;
            opacity: 0;
            z-index: 1;
          }
          .swiper-img{
            display: inline-block;
            overflow: hidden;
            &:hover{
              transition: all 2s;
              .img-cover{
                opacity: 1;
              }
              >img{
                transform: scale(1.1);
                &~.icon{
                  opacity: 1;
                  transform: scale(1.2);
                }
              }
            }
            >img{
              width: 225px;
              transition: all 1s;
            }
            .icon{
              z-index:1;
              position: absolute;
              width: 55px;
              height: 55px;
              background-color: white;
              top: 30%;
              left: 0;
              right: 0;
              margin: auto;
              border-radius: 50%;
              opacity: 0;
              transition: all 1s;
              .icon-bofang1{
                font-size: 30px;
                position: absolute;
                top: 50%;
                margin-top: -12px;
                left: 50%;
                margin-left: -12px;
              }
            }
          }

          .title{
            margin:10px 0;
            text-align: left;
            width: 225px;
            &:hover{
              color: #31c27c
            }
          }
          .count{
            text-align: left;
            color: #c3c3c3;
          }
          &:nth-child(5n){
            margin-right: 0px;
          }
          }

        }
      }
    .swiper-button-prev,.swiper-button-next{
      color: rgba(0,0,0,0.7);
      top: 30%;
      background-color: #efeeef;
      padding: 20px 10px;
    }
    };



</style>
